<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqGoodsList} from "@/api/goods";
import {onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";


const info = ref({
  page: 1,
  limit: 10
})

const goodsList = ref<any>([])

onMounted(async () => {
  await getGoodsList();
})

async function getGoodsList() {
  await reqGoodsList(info.value).then((res: any) => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        goodsList.value.push(...res.data)
      } else {
        isData.value = false
      }
    }
    uni.stopPullDownRefresh()
  })
}

onPullDownRefresh(async () => {
  info.value.page = 1
  goodsList.value = []
  await getGoodsList();
})

onReachBottom(async () => {
  if (isData.value) {
    info.value.page++
    await getGoodsList();
  }
})

const isData = ref(true)

const list = [
  'https://img60.ddimg.cn/2024/3/20/2024032015220512176.jpg',
  'https://img62.ddimg.cn/2024/3/20/2024032009433919520.jpg',
  'https://img60.ddimg.cn/2024/3/18/2024031811191388696.jpg',
  'https://img62.ddimg.cn/2024/3/20/2024032009425248790.jpg',
  'https://img62.ddimg.cn/2024/3/20/2024032009443427991.jpg',
  'https://img63.ddimg.cn/2024/3/20/2024032009433678616.jpg',
  'https://img63.ddimg.cn/2024/3/18/2024031813515736862.jpg'
]
</script>

<template>
  <view class="bar"></view>

  <view>
    <view style="padding: 20rpx">
      <u-search style="margin-left: 15rpx" placeholder="搜索" :animation="true"></u-search>
    </view>
    <u-swiper
        style="margin: 0 15rpx"
        :list="list"
        height="160"
        :indicator="true"
    ></u-swiper>
    <goodsItem v-for="(item,index) in goodsList" :item="item" :key="item.id"></goodsItem>
  </view>
  <u-divider
      v-if="!isData"
      text="没有更多数据了~"
  ></u-divider>
</template>

<style scoped lang="scss">

</style>
